
<template>
  <div class="app-container">
    <!-- 合同筛选START -->
    <div class="filter-container">
      <el-form
        ref="form"
        :inline="true"
        :model="listQuery"
        label-width="120px"
        class="demo-form-inline"
      >
      <el-form-item label="活动名称">
        <el-input style="width:200px" v-model.trim="listQuery.promotionName" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item label="红包金额"><el-select style="width:200px"  v-model="listQuery.redPacketAmount"
          clearable
          class="filter-item"
        >
          <el-option  v-for="item in redList" :key="item.code" :label="item.name"  :value="item.code"
          /></el-select>
      </el-form-item>
      <el-form-item label="是否关注公众号"><el-select style="width:200px"  v-model="listQuery.isAttention"
          clearable
          class="filter-item"
        >
          <el-option  v-for="item in isAttentionList" :key="item.code" :label="item.name"  :value="item.code"
          /></el-select>
      </el-form-item>
      <el-form-item label="审核状态"><el-select style="width:200px"  v-model="listQuery.verifyStatus"
          clearable
          class="filter-item"
        >
          <el-option  v-for="item in verifyStatusList" :key="item.code" :label="item.name"  :value="item.code"
          /></el-select>
      </el-form-item>
        <el-form-item label="用户ID">
          <el-input style="width:200px" v-model.trim="listQuery.userId" placeholder="请输入内容" />
        </el-form-item>

        <div class="search-warp">
          <el-button
            type="primary"
            @click="handleFilter"
          >搜索</el-button>
          <el-button  plain @click="emptyForm">清空</el-button>
        </div>
      </el-form>
    </div>
    <!-- 列表Start -->
    <div>
      <div class="select-all">
        <el-button
          v-if="!batchOptionBoolen"
          class="filter-item"
          type="primary"
          @click="batchOption"
        >批量操作</el-button>
        <div v-if="batchOptionBoolen">
          <el-button
            class="filter-item"
            type="warning"
            @click="canclebatchOption"
          >取消</el-button>
          <el-button
            class="filter-item"
            type="primary"
            @click="bindbatchOptionAll"
          >通过</el-button>
        </div>
      </div>
      <el-table
          v-loading="bannerLoding"
          ref="multipleTable"
          :data="activeVerifyList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            v-if="batchOptionBoolen"
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="活动名称"
            width="120">
            <template slot-scope="scope">{{ scope.row.promotionName  }}</template>
          </el-table-column>
          <el-table-column
            label="活动时间"
            width="200">
            <template slot-scope="scope">{{ dateFormat('YYYY-mm-dd',scope.row.activeStartTime)  +"-"+ dateFormat('YYYY-mm-dd',scope.row.activeEndTime)}}</template>
          </el-table-column>

          <el-table-column
            width="280px"
            prop="userId"
            label="用户ID"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="userName" label="用户微信" show-overflow-tooltip></el-table-column>
          <el-table-column
            label="是否关注公众号"
            width="120">
            <template slot-scope="scope">{{ scope.row.isAttention?"是" : "否"}}</template>
          </el-table-column>
          <el-table-column prop="activeOrderCount" label="下单数" show-overflow-tooltip></el-table-column>
          <el-table-column prop="activeUserPayAmount" label="累计预估金额" show-overflow-tooltip></el-table-column>
          <el-table-column prop="redPacketAmount" label="红包金额" show-overflow-tooltip></el-table-column>
          <!-- pass  pending -->
          <el-table-column
            label="审核状态"
            width="120">
            <template slot-scope="scope">{{ scope.row.verifyStatus=="pending"? "未审核" :"已审核"}}</template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="120">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.verifyStatus=='pending' "
                type="primary"
                @click="passNow(scope.row)"
              >通过</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pass-money">
          <span>
            已审核通过金额总计：{{this.sumPassAmount}} 元
          </span>
        </div>
    </div>

    <!-- 列表END -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />
    <!-- 删除弹框 -->
    <el-dialog title="提示" :visible.sync="deleteDialog" width="30%">
      <span>确认删除该合同?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialog = false">取 消</el-button>
        <el-button type="primary" >确 定</el-button>
      </span>
    </el-dialog>

    <!-- 作废弹框 -->
    <el-dialog title="提示" :visible.sync="voidDialog" width="30%">
      <span>确认作废该合同?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="voidDialog = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>


import { listUser } from "@/api/system/user";
import {
   queryFansList,
   queryFansListByName,
   queryOrders,
   queryUserSum,
   queryActive,
   activeOrderCountbyId
  } from "@/api/mall/index";
import { getToken } from "@/utils/auth";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
export default {
  name: "InformalContract",
  components: { Pagination },
  filters: {},
  data() {
    return {
      bannerLoding: false,
      batchOptionBoolen:false, //批量操作按钮

      activeVerifyList:[],
      total: 0,
      sumPassAmount:0,
      passSelectmore:[],

      redList:[{name:'不限',code: ""},
      {name:'2元',code: "2"},{name:'8元',code: "8"},
      {name:'20元',code: "20"},
      ],
      isAttentionList: [
        {name:'不限',code: ""},{name:'已关注',code: 1},{name:'未关注',code: 0},
      ],
      verifyStatusList: [
        {name:'不限',code: ""},{name:'已审',code: "pass"},{name:'未审',code: "pending"},
      ],

      voidDialog:false,
      voidId:"",
      currentProcessorUser:"",

      sourceCode: "addNewContract",
      sourceCodeUrl: false,
      sourceCodeBtn: false,
      sourceCodeShow: false,

      signCodeList: [],
      loginName: "",
      deleteId: "",
      deleteDialog: false,
      isFormal: "1",

      tableKey: 0,
      list: null,

      listLoading: true,

      permissions: [], //各种按钮显示权限
      sessionuser: null,
      listQuery: {
        current:1,
        size: 10,
        promotionName:"",//活动名称
        redPacketAmount:"", //金额
        isAttention:"", //是否关注公众号   1为关注   0为未关注
        verifyStatus: "", //审核状态
        userId:"",     //用户id
      },
    };
  },
  created() {
      this.getList()
  },
  methods: {
    dateFormat(fmt, date) {
        let ret="";
        date=new Date(date);
        const opt = {
          'Y+': date.getFullYear().toString(), // 年
          'm+': (date.getMonth() + 1).toString(), // 月
          'd+': date.getDate().toString(), // 日
          'H+': date.getHours().toString(), // 时
          'M+': date.getMinutes().toString(), // 分
          'S+': date.getSeconds().toString() // 秒
          // 有其他格式化字符需求可以继续添加，必须转化成字符串
        }
        for (let k in opt) {
          ret = new RegExp('(' + k + ')').exec(fmt)
          if (ret) {
            fmt = fmt.replace(
              ret[1],
              ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
            )
          }
        }
        return fmt
    },
    //批量通过
    bindbatchOptionAll(){
      this.activeOrderCountbyId()
    },
    // shulan-mgr/api/jd/active/verify?activeOrderCountId=123,456  @扫地僧@谢玉胜  审核接口
    passNow(row){
        this.passSelectmore = [row.activeOrderCountId]
        this.activeOrderCountbyId()
    },
    batchOption(){
      this.batchOptionBoolen = true;
    },
    canclebatchOption(){
      this.batchOptionBoolen = false;
      this.passSelectmore = []
    },

    handleSelectionChange(val) {
        console.log(val);
        this.multipleSelection = val;
        let list = []
        val.map(item => {
          const verifyStatus = item.verifyStatus
          if(verifyStatus=="pending"){
              list.push(item.activeOrderCountId)
          }
        })
        this.passSelectmore = list
    },

    activeOrderCountbyId(){
      let list = this.passSelectmore||[];
      if(list.length==0){
        this.$message("请选择未审核订单");
        return;
      }
      activeOrderCountbyId(list).then(res=>{
          this.getList()
      })
    },

    /*清空*/
    emptyForm() {
      this.listQuery = {
        current:1,
        size: 10,
        promotionName:"",//活动名称
        redPacketAmount:"", //金额
        isAttention:"", //是否关注公众号   1为关注   0为未关注
        verifyStatus: "", //审核状态
        userId:"",     //用户id
      }
    },
    /*搜素*/
    handleFilter() {
      this.listQuery.current = 1;
      this.getList();
    },
    // 获取数据
    getList() {
      this.bannerLoding = true;
      const params = this.listQuery;
      queryActive(params).then(response => {
          this.bannerLoding = false;
          if(response.code==200){
             this.activeVerifyList = response.data.activeVerifyList;
             this.total = response.data.total;
             this.sumPassAmount = response.data.sumPassAmount
          }else{
            this.$message("数据获取失败");
          }
        }
      );
    },

  }
};
</script>


<style scoped>
  .search-warp{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .select-all{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
  }
  .pass-money{
    margin-top: 20px;
    font-size: 16px;
    color: red;
  }
</style>
